<template>
  <div class="m-mainl">
    <div class="m-interfacel" v-if="isVisible">
      <div class="interface">
        <div class="col-l">
          <!-- 环境信息 -->
          <div class="g-boxl1">
            <div class="g-titl1">
              <div class="tit"><i></i>环境信息</div>
              <div class="m-selectl1 w151">
                <a-select
                  ref="select"
                  v-model:value="value1"
                  placeholder="请选择"
                >
                  <a-select-option value="1">畜牧养殖场</a-select-option>
                  <a-select-option value="2">畜牧养殖场1</a-select-option>
                  <a-select-option value="3">畜牧养殖场2</a-select-option>
                  <a-select-option value="4">畜牧养殖场3</a-select-option>
                </a-select>
              </div>
            </div>
            <div
              class="m-boxl1"
              :style="'background-image: url(' + getImageUrl('bgl3.png') + ')'"
            >
              <div class="m-chartl1">
                <pieChart
                  :chartid="piedata.chartid"
                  :xData="piedata.xData"
                  :barD="piedata.barD"
                  :lineD1="piedata.lineD1"
                  :lineD2="piedata.lineD2"
                  :lineD3="piedata.lineD3"
                  :lineD4="piedata.lineD4"
                ></pieChart>
              </div>
            </div>
          </div>
          <!-- 摄像头监测 -->
          <div class="g-boxl1">
            <div class="g-titl1">
              <div class="tit"><i></i>摄像头监测</div>
              <div class="m-selectl1 w151">
                <a-select
                  ref="select"
                  v-model:value="value2"
                  placeholder="请选择"
                >
                  <a-select-option value="1">畜牧养殖场-1</a-select-option>
                  <a-select-option value="2">畜牧养殖场-2</a-select-option>
                  <a-select-option value="3">畜牧养殖场-3</a-select-option>
                  <a-select-option value="4">畜牧养殖场-4</a-select-option>
                </a-select>
              </div>
            </div>
            <div
              class="m-boxl1 h278"
              :style="'background-image: url(' + getImageUrl('bgl4.png') + ')'"
            >
              <div class="m-videol" @click="showModal" v-if="video">
                <!-- <video
                  class="video"
                  :poster="getImageUrl('imgl1.jpg')"
                 
                  muted
                  autoplay
                  controls
                ></video> -->
              
                <player :url="video" id="flv-player"></player>
              </div>
            </div>
          </div>
          <!-- 畜产品价格 -->
          <div class="g-boxl1">
            <div class="g-titl1">
              <div class="tit"><i></i>畜产品价格</div>
              <div class="m-selectl1 w151">
                <a-select
                  ref="select"
                  v-model:value="value3"
                  placeholder="请选择"
                >
                  <a-select-option value="1">畜产市场</a-select-option>
                  <a-select-option value="2">畜产市场1</a-select-option>
                  <a-select-option value="3">畜产市场2</a-select-option>
                  <a-select-option value="4">畜产市场3</a-select-option>
                </a-select>
              </div>
            </div>
            <div
              class="m-boxl1"
              :style="'background-image: url(' + getImageUrl('bgl3.png') + ')'"
            >
              <ul class="ul-listl1">
                <li v-for="(item, index) in listl1" :key="index">
                  <div class="con">
                    <div class="ll">{{ item.ll }}</div>
                    <div class="rr">
                      <div class="num">
                        <em>{{ item.num }}</em
                        >{{ item.num2 }}
                      </div>
                      {{ item.tt }}
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-c">
          <div class="m-searchl">
            <form action="">
              <div class="form">
                <input type="text" class="inp" placeholder="请输入地理位置" />
                <input type="submit" class="btn" value="" />
              </div>
            </form>
          </div>
          <div class="m-infol">
            <div class="item">
              <div class="g-titl2">
                <div class="tit"><i></i>预警信息</div>
                <div class="num">5</div>
              </div>
              <ul class="ul-listl4">
                <li v-for="(item, index) in listl4" :key="index">
                  <div class="con">
                    <div
                      class="icon"
                      :style="'background-image: url(' + item.bgsrc + ');'"
                    >
                      <img :src="item.src" alt="" />
                    </div>
                    <div class="txt">
                      <div class="tit">{{ item.tit }}</div>
                      <div class="date">
                        <span>{{ item.date1 }}</span>
                        <span>{{ item.date2 }}</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="g-titl2">
                <div class="tit"><i></i>技术服务动态</div>
              </div>
              <ul class="ul-listl4">
                <li v-for="(item, index) in listl5" :key="index">
                  <div class="con">
                    <div
                      class="icon"
                      :style="'background-image: url(' + item.bgsrc + ');'"
                    >
                      <img :src="item.src" alt="" />
                    </div>
                    <div class="txt">
                      <div class="tit">{{ item.tit }}</div>
                      <div class="date">
                        <span>{{ item.date1 }}</span>
                        <span>{{ item.date2 }}</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="item">
              <div class="g-titl2">
                <div class="tit"><i></i>主推技术</div>
              </div>
              <ul class="ul-listl4">
                <li v-for="(item, index) in listl6" :key="index">
                  <div class="con">
                    <div
                      class="icon"
                      :style="'background-image: url(' + item.bgsrc + ');'"
                    >
                      <img :src="item.src" alt="" />
                    </div>
                    <div class="txt">
                      <div class="tit">{{ item.tit }}</div>
                      <div class="date">
                        <span>{{ item.date1 }}</span>
                        <span>{{ item.date2 }}</span>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-r">
          <!-- 粪肥数据库 -->
          <div class="g-boxl1">
            <div class="g-titl1">
              <div class="tit"><i></i>粪肥数据库</div>
            </div>
            <div
              class="m-boxl1 h266"
              :style="'background-image: url(' + getImageUrl('bgl6.png') + ')'"
            >
              <div class="m-listl3">
                <ul class="ul-listl3">
                  <li v-for="(item, index) in listl2" :key="index">
                    <div class="con">
                      <div class="tit"><i></i>{{ item.tit }}</div>
                      <div class="desc">
                        <div class="ll">{{ item.desc }}</div>
                        <div class="rr">{{ item.date }}</div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 地方良种信息 -->
          <div class="g-boxl1">
            <div class="g-titl1">
              <div class="tit"><i></i>地方良种信息</div>
            </div>
            <div
              class="m-boxl1 h263"
              :style="'background-image: url(' + getImageUrl('bgl7.png') + ')'"
            >
              <div class="m-swiperl1" id="swiperl1">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <div
                      class="swiper-slide"
                      v-for="(item, index) in swiperl1"
                      :key="index"
                      @click="showModal2"
                    >
                      <div class="con">
                        <div class="pic">
                          <div
                            class="img"
                            :style="'background-image: url(' + item.src + ')'"
                          ></div>
                        </div>
                        <div class="txt">
                          <div class="tit">{{ item.tit }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
              </div>
            </div>
          </div>
          <!-- 土本微生物 -->
          <div class="g-boxl1">
            <div class="g-titl1">
              <div class="tit"><i></i>土本微生物</div>
            </div>
            <div
              class="m-boxl1"
              :style="'background-image: url(' + getImageUrl('bgl3.png') + ')'"
            >
              <ul class="ul-listl2">
                <li
                  v-for="(item, index) in listl3"
                  :key="index"
                  @click="goToPage(index)"
                >
                  <router-link :to="item.link" class="con">
                    <div class="pic">
                      <div
                        class="img"
                        :style="'background-image: url(' + item.src + ')'"
                      ></div>
                    </div>
                    <div class="tit">{{ item.tit }}</div>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-searchl fixed" v-if="!isVisible">
      <form action="">
        <div class="form">
          <input type="text" class="inp" placeholder="请输入地理位置" />
          <input type="submit" class="btn" value="" />
        </div>
      </form>
    </div>
    <div class="g-btnl1" @click="toggleVisibility">
      <i></i>{{ isVisible ? "隐藏界面" : "显示界面" }}
    </div>
  </div>
  <div class="mymap">
    <div id="mapDiv"></div>
  </div>

  <!-- 摄像头监测弹窗 -->
  <a-modal
    class="m-popl1"
    v-model:visible="visible"
    :centered="true"
    :footer="null"
    :style="'background-image: url(' + getImageUrl('popbgl1.png') + ');'"
  >
    <div class="g-titl2">
      <div class="tit"><i></i>摄像头监测</div>
    </div>
    <div class="m-selectl1 w151">
      <a-select ref="select" v-model:value="value4" placeholder="请选择">
        <a-select-option value="1">畜牧养殖场-1</a-select-option>
        <a-select-option value="2">畜牧养殖场-2</a-select-option>
        <a-select-option value="3">畜牧养殖场-3</a-select-option>
        <a-select-option value="4">畜牧养殖场-4</a-select-option>
      </a-select>
    </div>
    <div class="m-videol2">
      <div class="top">
        <video
          class="video"
          :poster="getImageUrl('imgl6.jpg')"
          src=""
          muted
          autoplay
          controls
        ></video>
        <div class="btnbox">
          <div class="btn top">
            <img :src="getImageUrl('iconl12.png')" alt="" />
          </div>
          <div class="btn right">
            <img :src="getImageUrl('iconl13.png')" alt="" />
          </div>
          <div class="btn bottom">
            <img :src="getImageUrl('iconl14.png')" alt="" />
          </div>
          <div class="btn left">
            <img :src="getImageUrl('iconl15.png')" alt="" />
          </div>
        </div>
      </div>
      <div class="m-txtl1">
        <div class="info">
          <p>
            开平开发区始建于2002年,2007年5月和2008年6月分别被河北省科技厅确立为"河北省开平现代工程机械制造特色产业基地"和"河北省区域特色产业基地"。2012年12月河北省政府批复设立
            唐山开平高新技术产业开发区"。2014年4月批准为河北唐山开平经济开发区。2019年12月获批国家应急产业(装备制造业)示范基地。开平区委、区政府为开平开发区的责任主体,开平开发区管委会根据开平区委、区政府的授权,对辖区行使管理、监督、协调、服务等职能。按照精简、统一、效能的原则,开平开发区管委会机关设置综合办公室、建设局、招商投资局、财政局、科技.......
          </p>
        </div>
      </div>
    </div>
  </a-modal>

  <!-- 地方良种信息弹窗 -->
  <a-modal
    class="m-popl1 popl2"
    v-model:visible="visible2"
    :centered="true"
    :footer="null"
    :style="'background-image: url(' + getImageUrl('popbgl2.png') + ');'"
  >
    <div class="g-titl2">
      <div class="tit"><i></i>地方良种信息</div>
    </div>
    <div class="m-swiperl1 styl1" id="swiperl2">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in swiperl2"
            :key="index"
          >
            <div class="con">
              <div class="pic">
                <div
                  class="img"
                  :style="'background-image: url(' + item.src + ')'"
                ></div>
              </div>
              <div class="m-txtl1">
                <div class="info">{{ item.txt }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </a-modal>
</template>
<script setup>
import player from '../components/Player.vue';
import Swiper from "swiper";
import "swiper/css/swiper.css";
import pieChart from '../components/pieChart.vue';
import { reactive, ref, onMounted, watch } from 'vue';
const value1 = ref("1");
const value2 = ref("1");
const value3 = ref("1");
const value4 = ref("1");

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}

const initSwiper = () => {
  new Swiper("#swiperl1 .swiper-container", {
    speed: 800,
    loop: true,
    autoplay: {
      delay: 4000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '#swiperl1 .swiper-button-next',
      prevEl: '#swiperl1 .swiper-button-prev',
    },
  });
};

let swiperInstance = null;
const initSwiper2 = () => {
  swiperInstance = new Swiper("#swiperl2 .swiper-container", {
    speed: 800,
    loop: true,
    autoplay: {
      delay: 4000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '#swiperl2 .swiper-button-next',
      prevEl: '#swiperl2 .swiper-button-prev',
    },
  });
};

const listl1 = ref([
  {
    ll: "牛肉",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  },
  {
    ll: "鸭肉",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  },
  {
    ll: "羊肉",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  },
  {
    ll: "鸡蛋",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  },
  {
    ll: "鸡肉",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  },
  {
    ll: "牛奶",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  },
  {
    ll: "猪肉",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  },
  {
    ll: "羊奶",
    num: "46",
    num2: ".00",
    tt: "元/斤"
  }
])

const listl2 = ref([
  {
    tit: "取样地点莱西荷斯坦牧",
    desc: "样品名称有机肥",
    date: "2024/08/01",
  },
  {
    tit: "取样地点莱西荷斯坦牧",
    desc: "样品名称有机肥",
    date: "2024/08/01",
  },
  {
    tit: "取样地点莱西荷斯坦牧",
    desc: "样品名称有机肥",
    date: "2024/08/01",
  },
  {
    tit: "取样地点莱西荷斯坦牧",
    desc: "样品名称有机肥",
    date: "2024/08/01",
  },
  {
    tit: "取样地点莱西荷斯坦牧",
    desc: "样品名称有机肥",
    date: "2024/08/01",
  },
  {
    tit: "取样地点莱西荷斯坦牧",
    desc: "样品名称有机肥",
    date: "2024/08/01",
  },
])

const swiperl1 = ref([
  {
    src: getImageUrl('imgl2.jpg'),
    tit: "琅琊鸡为山东省地方品种,具有体格小,肉质风味好,产蛋多,抗病力强,适应性好,饲料报酬率高等优点。2010年被山东省畜牧兽医局列入《山东省高禽遗传资源保护名录》",
  },
  {
    src: getImageUrl('imgl2.jpg'),
    tit: "琅琊鸡为山东省地方品种,具有体格小,肉质风味好,产蛋多,抗病力强,适应性好,饲料报酬率高等优点。2010年被山东省畜牧兽医局列入《山东省高禽遗传资源保护名录》",
  },
  {
    src: getImageUrl('imgl2.jpg'),
    tit: "琅琊鸡为山东省地方品种,具有体格小,肉质风味好,产蛋多,抗病力强,适应性好,饲料报酬率高等优点。2010年被山东省畜牧兽医局列入《山东省高禽遗传资源保护名录》",
  },
])

const swiperl2 = ref([
  {
    src: getImageUrl('imgl7.jpg'),
    txt: '开平开发区始建于2002年,2007年5月和2008年6月分别被河北省科技厅确立为"河北省开平现代工程机械制造特色产业基地"和"河北省区域特色产业基地"。2012年12月河北省政府批复设立 唐山开平高新技术产业开发区"。2014年4月批准为河北唐山开平经济开发区。2019年12月获批国家应急产业(装备制造业)示范基地。开平区委、区政府为开平开发区的责任主体,开平开发区管委会根据开平区委、区政府的授权,对辖区行使管理、监督、协调、服务等职能。按照精简、统一、效能的原则,开平开发区管委会机关设置综合办公室、建设局、招商投资局、财政局、科技.......',
  },
  {
    src: getImageUrl('imgl7.jpg'),
    txt: '开平开发区始建于2002年,2007年5月和2008年6月分别被河北省科技厅确立为"河北省开平现代工程机械制造特色产业基地"和"河北省区域特色产业基地"。2012年12月河北省政府批复设立 唐山开平高新技术产业开发区"。2014年4月批准为河北唐山开平经济开发区。2019年12月获批国家应急产业(装备制造业)示范基地。开平区委、区政府为开平开发区的责任主体,开平开发区管委会根据开平区委、区政府的授权,对辖区行使管理、监督、协调、服务等职能。按照精简、统一、效能的原则,开平开发区管委会机关设置综合办公室、建设局、招商投资局、财政局、科技.......',
  },
  {
    src: getImageUrl('imgl7.jpg'),
    txt: '开平开发区始建于2002年,2007年5月和2008年6月分别被河北省科技厅确立为"河北省开平现代工程机械制造特色产业基地"和"河北省区域特色产业基地"。2012年12月河北省政府批复设立 唐山开平高新技术产业开发区"。2014年4月批准为河北唐山开平经济开发区。2019年12月获批国家应急产业(装备制造业)示范基地。开平区委、区政府为开平开发区的责任主体,开平开发区管委会根据开平区委、区政府的授权,对辖区行使管理、监督、协调、服务等职能。按照精简、统一、效能的原则,开平开发区管委会机关设置综合办公室、建设局、招商投资局、财政局、科技.......',
  },
])

const listl3 = ref([
  {
    link: "/microorganism",
    src: getImageUrl('imgl3.png'),
    tit: "益生菌",
  },
  {
    link: "/microorganismPhage",
    src: getImageUrl('imgl4.png'),
    tit: "噬菌体",
  },
  {
    link: "/microorganismResistant",
    src: getImageUrl('imgl5.png'),
    tit: "耐药菌",
  },
])

const listl4 = ref([
  {
    bgsrc: getImageUrl('bgl15.png'),
    src: getImageUrl('iconl7.png'),
    tit: "试验基地1氨气浓度异常:75mg/m",
    date1: "2024/08/01",
    date2: "16:20:21"
  },
  {
    bgsrc: getImageUrl('bgl15.png'),
    src: getImageUrl('iconl7.png'),
    tit: "试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1: "2024/08/01",
    date2: "16:20:21"
  },
  {
    bgsrc: getImageUrl('bgl15.png'),
    src: getImageUrl('iconl7.png'),
    tit: "试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1: "2024/08/01",
    date2: "16:20:21"
  },
  {
    bgsrc: getImageUrl('bgl15.png'),
    src: getImageUrl('iconl7.png'),
    tit: "试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1: "2024/08/01",
    date2: "16:20:21"
  },
  {
    bgsrc: getImageUrl('bgl15.png'),
    src: getImageUrl('iconl7.png'),
    tit: "试验基地1氨气浓度异常:的总数据展示情况75mg/m3",
    date1: "2024/08/01",
    date2: "16:20:21"
  },
])

const listl5 = ref([
  {
    bgsrc: getImageUrl('bgl16.png'),
    src: getImageUrl('iconl8.png'),
    tit: "2024年6月份农业科技下乡活动统计表数据",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl16.png'),
    src: getImageUrl('iconl8.png'),
    tit: "2024年6月份农业科技下乡活动统计表数据",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl16.png'),
    src: getImageUrl('iconl8.png'),
    tit: "2024年6月份农业科技下乡活动统计表数据",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl16.png'),
    src: getImageUrl('iconl8.png'),
    tit: "2024年6月份农业科技下乡活动统计表数据",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl16.png'),
    src: getImageUrl('iconl8.png'),
    tit: "2024年6月份农业科技下乡活动统计表数据",
    date1: "2024/08/01",
    date2: ""
  },
])

const listl6 = ref([
  {
    bgsrc: getImageUrl('bgl17.png'),
    src: getImageUrl('iconl9.png'),
    tit: "规模化养殖场智慧养殖模式",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl17.png'),
    src: getImageUrl('iconl9.png'),
    tit: "规模化养殖场智慧养殖模式",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl17.png'),
    src: getImageUrl('iconl9.png'),
    tit: "规模化养殖场智慧养殖模式",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl17.png'),
    src: getImageUrl('iconl9.png'),
    tit: "规模化养殖场智慧养殖模式",
    date1: "2024/08/01",
    date2: ""
  },
  {
    bgsrc: getImageUrl('bgl17.png'),
    src: getImageUrl('iconl9.png'),
    tit: "规模化养殖场智慧养殖模式",
    date1: "2024/08/01",
    date2: ""
  },
])

const piedata = reactive({
  chartid: "echartsl1",
  xData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
  barD: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
  lineD1: [62, 66, 62, 66, 62, 66, 62, 66, 62, 66, 62, 66],
  lineD2: [42, 44, 46, 48, 45, 42, 50, 50, 50, 50, 52, 52],
  lineD3: [36, 37, 38, 39, 38, 37, 39, 39, 39, 39, 39, 39],
  lineD4: [20, 24, 20, 24, 20, 24, 20, 24, 20, 24, 20, 24],
})

const isVisible = ref(true);

const toggleVisibility = () => {
  isVisible.value = !isVisible.value;
}


// 摄像头检测弹窗
const visible = ref(false);
const showModal = () => {
  visible.value = true;
};

// 地方良种信息弹窗
const visible2 = ref(false);
const showModal2 = () => {
  visible2.value = true;
};
watch(visible2, (newVisible) => {
  if (newVisible) {
    setTimeout(() => {
      initSwiper2();
    }, 500);
  } else {
    if (swiperInstance) {
      swiperInstance.destroy();
      swiperInstance = null;
    }
  }
});

import axios from 'axios';
const video = ref(null);

onMounted(() => {
  initSwiper();

  axios.post('https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=at.9aella1m86kw6yn74j0cwipl24zureul-3godgtzcwl-19t89d3-oejezjlnk&deviceSerial=L06485106&protocol=4').then(res => {
    console.log(res.data);

    if (res.data.code == 200) {
      video.value = res.data.data.url;
    }
  }).catch(err => {
    console.log(err);
  });
});

import $ from 'jquery';
// 天地图
function loadMap () {

  var T = window.T
  var map;
  var zoom = 10;
  var center = new T.LngLat(120.380333,36.061192);
  map = new T.Map('mapDiv');
  map.centerAndZoom(center, zoom);

  map.setStyle('indigo')
  /* var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=4e3c574bc823f1fcaeb09abb35d8f82c";
  //创建自定义图层对象
  var lay = new T.TileLayer(imageURL, {
    minZoom: 1,
    maxZoom: 18
  });
  //将图层增加到地图上
  map.addLayer(lay); */
  // map.addControl(window.TMAP_HYBRID_MAP);

  var size20 = Math.ceil(1.04 * $(window).width() / 100);
  var size30 = Math.ceil(1.56 * $(window).width() / 100);
  var size55 = Math.ceil(2.86 * $(window).width() / 100);
  var size230 = Math.ceil(12 * $(window).width() / 100);
  var size400 = Math.ceil(20.8 * $(window).width() / 100);

  //创建信息窗口对象
  //创建图片对象
  var icon = new T.Icon({
    id: 'icon',
    iconUrl: './adr1.png',
    iconSize: new T.Point(size20, size20),
    iconAnchor: new T.Point(size20 / 2, size20 / 2)
  });
  var icon1 = new T.Icon({
    id: 'icon1',
    iconUrl: './adr2.png',
    iconSize: new T.Point(size20, size20),
    iconAnchor: new T.Point(size20 / 2, size20 / 2)
  });


  var mapData = [{
    id: 1,
    name: "畜牧养殖场1",
    lng: 112.04887691860762,
    lat: 38.41150023318893,
    info: {
      user: "张峰仁",
      tel: "13012345678",
      address: "地址沈阳市黄河大街1101-01"
    },
    pics: ['c-j1.jpg', 'c-j1.jpg', 'c-j1.jpg'],
    device: 'device',
    camera: 'camera',
  }, {
    id: 2,
    name: "畜牧养殖场2",
    lng: 110.14790265120543,
    lat: 39.38410775975177,
    info: {
      user: "张峰仁",
      tel: "13012345678",
      address: "地址沈阳市黄河大街1101-01"
    },
    pics: ['c-j1.jpg', 'c-j1.jpg', 'c-j1.jpg'],
    device: 'device',
    camera: 'camera',
  }, {
    id: 3,
    name: "畜牧养殖场3",
    lng: 112.78208338814562,
    lat: 39.01870595676817,
    info: {
      user: "张峰仁",
      tel: "13012345678",
      address: "地址沈阳市黄河大街1101-01"
    },
    pics: ['c-j1.jpg', 'c-j1.jpg', 'c-j1.jpg'],
    device: 'device',
    camera: 'camera',
  }, {
    id: 4,
    name: "畜牧养殖场4",
    lng: 112.31076656843624,
    lat: 38.97355081208168,
    info: {
      user: "张峰仁",
      tel: "13012345678",
      address: "地址沈阳市黄河大街1101-01"
    },
    pics: ['c-j1.jpg', 'c-j1.jpg', 'c-j1.jpg'],
    device: 'device',
    camera: 'camera',
  }, {
    id: 5,
    name: "畜牧养殖场5",
    lng: 110.82696093179158,
    lat: 39.43597119167025,
    info: {
      user: "张峰仁",
      tel: "13012345678",
      address: "地址沈阳市黄河大街1101-01"
    },
    pics: ['c-j1.jpg', 'c-j1.jpg', 'c-j1.jpg'],
    device: 'device',
    camera: 'camera',
  }]




  for (var i = 0; i < mapData.length; i++) {
    var marker = new T.Marker(new T.LngLat(mapData[i].lng, mapData[i].lat), { icon: icon });  // 创建标注
    var content = `<div class="map-pop">
      <div class="top">
        <div class="tit">${mapData[i].name}</div>
      </div>
      <div class="info">
        <div class="item">
          <div class="con">
            <div class="icon">
              <img src="./m-i1.png" alt="" />
            </div>
            <div class="txt">张峰仁</div>
          </div>
        </div>
        <div class="item">
          <div class="con">
            <div class="icon">
              <img src="./m-i2.png" alt="" />
            </div>
            <div class="txt">13012345678</div>
          </div>
        </div>
        <div class="item w100">
          <div class="con">
            <div class="icon">
              <img src="./m-i3.png" alt="" />
            </div>
            <div class="txt">地址沈阳市黄河大街1101-01</div>
          </div>
        </div>
      </div>
      <img src="./map-line.png" alt="" class="line" />
      <ul class="ul-picsb1">
        <li>
          <div class="itm">
            <div class="pic">
              <img src="./c-j1.jpg" alt="">
            </div>
          </div>
        </li>
        <li>
          <div class="itm">
            <div class="pic">
              <img src="./c-j1.jpg" alt="">
            </div>
          </div>
        </li>
        <li>
          <div class="itm">
            <div class="pic">
              <img src="./c-j1.jpg" alt="">
            </div>
          </div>
        </li>
      </ul>
      <img src="./map-line.png" alt="" class="line" />
      <div class="bot">
        <div class="btns">
          <div class="btn js-btn" data-id="${mapData[i].id}"><img src="./m-i4.png" alt=""><span>设备</span></div>
          <div class="btn js-btn1" data-id="${mapData[i].id}"><img src="./m-i5.png" alt=""><span>摄像头</span></div>
        </div>
      </div>
    </div>`;
    map.addOverLay(marker);               // 将标注添加到地图中
    var label = new T.Label({
      text: mapData[i].name,
      position: marker.getLngLat(),
      offset: new T.Point(-size55, size30)
    });
    // label.setFontColor('#fff');
    // label.setBackgroundColor('rgba(0,0,0,.3)');
    map.addOverLay(label);
    addClickHandler(content, marker);
  }
  function addClickHandler (content, marker) {
    marker.addEventListener("click", function (e) {
      // var p = e.target;
      marker.setIcon(icon1);// 更新标注
      openInfo(content, e, marker)
    }
    );
  }
  function openInfo (content, e, clickmarker) {
    var point = e.lnglat;
    marker = new T.Marker(point);// 创建标注
    var markerInfoWin = new T.InfoWindow(content, { closeOnClick: true, offset: new T.Point(size230, size400) }); // 创建信息窗口对象
    map.openInfoWindow(markerInfoWin, point); //开启信息窗口

    markerInfoWin.addEventListener('close', function (p) {
      clickmarker.setIcon(icon);// 更新标注
    })
  }
  // 点击设备按钮
  $('body').on('click', '.js-btn', function () {
    var id = $(this).data('id');
    console.log(11, id);
  });
  // 点击摄像头按钮
  $('body').on('click', '.js-btn1', function () {
    var id = $(this).data('id');
    console.log(22, id);
  });

}

onMounted(() => {
  loadMap();
});

</script>
